<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
import { getSearchList } from "../../apis/music";
import { formatTime } from "../../utils/tool";
import { storeToRefs } from "pinia";
import { musicStore } from "@/store/music";
import { ipcRendererSend } from "../../utils/ipcRenderer";
import { Local } from "../../utils/storage";
const { songListIds, musicDetail, songId, likeIdList } = storeToRefs(
  musicStore()
);

const loading = ref(false);
const route = useRoute();
const albumList = ref([]);
const count = ref();
const currentPage = ref(1);
const getInit = async (page) => {
  loading.value = true;
  currentPage.value = page;
  let res2 = await getSearchList(route.params.keyword, 50, (page - 1) * 24, 1);
  albumList.value = res2.result.songs;
  count.value = res2.result.songCount;
  loading.value = false;
};
getInit(1);

const handlePlay = (item) => {
  musicDetail.value = item;
  songListIds.value = albumList.value;
  Local.set("songList", albumList.value);
  Local.set("musicInfo", item);
  songId.value = item.id;
  ipcRendererSend("windows-param", {
    emit: "playMusic",
    data: item.id,
    targetName: "home",
  });
};
const handleVideo = (item) => {
  createWindow({
    windowName: "videoDetail",
    path: "videoDetail",
    width: 1360,
    height: 820,
    param: { id: item.mv },
  });
  ipcRendererSend("windows-param", {
    emit: "playVideo",
    targetName: "home",
  });
};

const handleAlbum = (id) => {
  createWindow({
    windowName: "albumDetail",
    path: "albumDetail",
    width: 1200,
    height: 820,
    param: { id: id },
  });
};

const handleSinger = (id) => {
  createWindow({
    windowName: "singerDetail",
    path: "singerDetail",
    width: 1200,
    height: 820,
    param: { id: id },
  });
};
</script>
<template>
  <div v-loading="loading" class="singer_song">
    <el-scrollbar heigt="100%">
      <div class="title">搜索 歌曲 "{{ route.params.keyword }}"</div>
      <div class="list_wrap">
        <music-list listInfo="" :songs="albumList"></music-list>
      </div>
      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="Math.ceil(count / 50) * 24"
          :pager-count="7"
          @current-change="getInit"
          :current-page.sync="currentPage"
        >
        </el-pagination>
      </div>
    </el-scrollbar>
    <upbar></upbar>
  </div>
</template>

<style lang="scss" scoped>
.singer_song {
  height: 100%;
  .title {
    font-size: 30px;
    height: 40px;
    line-height: 40px;
    margin-bottom: 40px;
    font-weight: 600;
  }

  .list_wrap {
    width: 100%;
    .item_wrap {
      .item {
        background-color: #fff;
        height: 40px;
        padding: 10px 0;
        display: flex;
        align-items: center;
        border-radius: 10px;
        .cover {
          // margin: 0 10px;
          width: 45px;
          height: 45px;
          // border-radius: 5px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 18px;
          color: #263869;
          font-weight: 600;
          .el-image {
            width: 100%;
            height: 100%;
            border-radius: 5px;
            box-shadow: 2px 2px 12px 4px rgba(0, 0, 0, 0.1);
          }
        }
        .info {
          cursor: pointer;
          margin-left: 10px;
          width: 30%;
          .name {
            width: 100%;
            font-weight: 600;
            font-size: 17px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .creator_name {
            color: #525252;
            font-size: 13px;
            &:hover {
              text-decoration: underline;
            }
          }
        }
        .album {
          cursor: pointer;
          color: #525252;
          width: 30%;
          font-size: 15px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          &:hover {
            text-decoration: underline;
          }
        }
        .timer {
          margin-left: 5px;
          color: #525252;
          font-size: 15px;
        }
        .btn {
          width: 20%;
          display: flex;
          align-items: center;
          justify-content: center;
          div {
            display: none;
            margin-left: 20px;
          }
          div:hover {
            transform: scale(1.1);
          }
          .like {
            font-size: 15px;
          }
        }
        .mv {
          width: 8%;
          text-align: right;
          margin-right: 10px;
          &:hover .el-button {
            transform: scale(1.1);
          }
          .el-button {
            background-color: #fff;
            color: rgb(16, 24, 134);
            font-weight: 600;
            border: none;
            border-radius: 5px;
          }
        }
      }
      .active_position {
        color: #335eea;
        background: #eaeffd;
        .info {
          .name,
          .creator_name {
            color: #335eea;
          }
        }
        .album,
        .timer {
          color: #335eea;
        }
      }
      .item:hover {
        background-color: #f6f6f8;
      }
      .item:hover .btn div {
        display: block;
      }
    }
  }
}
</style>
